<template>
  <div class="add-team-box">
    <a-alert>当前账号没有可以查询到的团队信息，请在下方表单内添加团队后选择团队</a-alert>
    <a-card title="新增团队">
      <a-form auto-label-width>
        <a-form-item field="teamName" label="团队名称">
          <a-input v-model="form.teamName" placeholder="请输入团队名称" />
        </a-form-item>
        <a-form-item field="teamDesc" label="请输入团队介绍">
          <a-textarea placeholder="请输入团队介绍" allow-clear v-model="form.teamDesc" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSubmit">新增</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { createTeamApi } from '@/api/system/team'

const form = ref({
  teamName: '',
  teamDesc: ''
})

const onSubmit = async () => {
  await createTeamApi(form.value)
  window.location.reload()
}
</script>

<style scoped lang="scss">
.add-team-box {
  min-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
</style>
